<template>
  <div>
    <h1>Custom Tree Component</h1>
    <el-tree :treeData="treeData" @nodeClick="handleNodeClick" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ElTree from './components/ElTree.vue'; // 导入自定义树组件
// 定义树的数据结构
const treeData = ref([
  {
    id: 1,
    label: 'Node 1',
    children: [
      {
        id: 2,
        label: 'Node 1.1',
        children: [
          {
            id: 3,
            label: 'Node 1.1.1',
            children: [],
          },
        ],
      },
      {
        id: 4,
        label: 'Node 1.2',
        children: [],
      },
    ],
  },
]);

// 处理节点点击事件
const handleNodeClick = (node:any) => {
  console.log('Node clicked in parent:', node.label);
  treeData.value[0].label= "45646"
};

</script>